<template>
  <view class="my-sign-up">
    <up-tabs
      :list="activityStatusTabs"
      :current="curActivityStatusTab"
      :line-width="rpx2px(72)"
      :lineColor="'#00B588'"
      :line-height="rpx2px(9)"
      :itemStyle="activityStatusTabStyle"
      @change="handleActivityStatusTabChange"
      :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
      }"
    />
    <up-list v-if="activityList.length > 0" @scrolltolower="scrollToLower">
      <up-list-item v-for="(activity, index) in activityList" :key="index">
        <activity-item
          :activity-item="activity"
          @tap="handleActivityItemClick(activity)"
        >
          <template #btn-group>
            <view class="btn-group">
              <view
                v-if="
                  curActivityStatusTab === 0 &&
                  activity.signType == 1 &&
                  activity.signStatus == 1
                "
                class="btn scan"
                @tap.stop="handleScanBtnCLick"
              >
                扫码签到
              </view>
              <view
                v-else-if="
                  curActivityStatusTab === 0 &&
                  activity.signType == 0 &&
                  activity.signStatus == 1
                "
                class="btn scan"
                @tap.stop="userSignActivity(activity.id)"
              >
                签到
              </view>
<!--              <view
                v-else-if="curActivityStatusTab === 2"
                class="btn not-start"
              >
                未开始
              </view>
              <view v-else class="btn ending"> 已结束 </view>-->
            </view>
          </template>
        </activity-item>
      </up-list-item>
    </up-list>
    <none-data v-else />
  </view>
</template>
<script setup>
import { ref, watch } from "vue";
import { rpx2px } from "../../utils/utils";
import {
  getMySignUpActivityListApi,
  userSignActivityApi,
} from "@/api/activity";
import { onReachBottom, onShow } from "@dcloudio/uni-app";
import ActivityItem from "@/package_activity/components/activity-item.vue";
import { customNav } from "@/utils/customNav";
// 我的报名tab
const activityStatusTabs = ref([
  { name: "进行中" },
  { name: "已结束" },
  { name: "未开始" },
]);
// 当前活动状态tab
const curActivityStatusTab = ref(0);
watch(curActivityStatusTab, () => {
  getMySignUpActivityListData();
});
const activityStatusTabStyle = {
  flex: 1,
  fontFamily: "ali-p",
  fontSize: "31rpx",
  height: "80rpx!important",
};
/**
 * 监听活动状态tab切换
 * @param tab
 */
const handleActivityStatusTabChange = (tab) => {
  params.value.page = 1;
  activityList.value = [];
  params.value.type = curActivityStatusTab.value = tab.index;
};

const activityList = ref([]);
const listTotal = ref(0);
const params = ref({
  limit: 10,
  page: 1,
  type: 0,
});
/**
 * 获取我的报名活动列表
 * @returns {Promise<void>}
 */
const getMySignUpActivityListData = async () => {
  await uni.showLoading({
    title: "加载中...",
  });
  const res = await getMySignUpActivityListApi(params.value);
  const { code, data } = res;
  if (code === 200) {
    uni.hideLoading();
    listTotal.value = data.total;
    activityList.value = data.records;
  }
};
/**
 * 获取我的报名活动列表
 * @returns {Promise<void>}
 */
const getMySignUpActivityListDown = async () => {
  await uni.showLoading({
    title: "加载中...",
  });
  const res = await getMySignUpActivityListApi(params.value);
  const { code, data } = res;
  if (code === 200) {
    uni.hideLoading();
    listTotal.value = data.total;
    activityList.value.push(...data.records);
  }
};
const scrollToLower = () => {
  if (listTotal.value > params.value.page * params.value.limit) {
    params.value.page++;
    getMySignUpActivityListData();
  }
};

/**
 * 扫码签到按钮点击事件监听
 */
const handleScanBtnCLick = () => {
  // #ifdef H5
  window.mobile.jsCallOpenQrScan();
  // #endif
  // #ifdef MP-WEIXIN
  uni.scanCode({
    onlyFromCamera: true,
    scanType: ["qrCode"],
    autoZoom: true,
    success: (res) => {
      console.log("扫码结果", res);
      parseQRCode();
      if (res.errMsg.includes("ok")) {
        userSignActivity(res.result);
      }
    },
    fail: (err) => {
      console.error("扫码错误", err);
    },
    complete: (res) => {
      console.log("成功扫码", res);
    },
  });
  // #endif
};
/**
 * 解析扫码结果
 */
const parseQRCode = () => {
  uni.vibrateShort();
};
const userSignActivity = async (activityId) => {
  const res = await userSignActivityApi(activityId);
  const { code, data, msg } = res;
  if (code === 200) {
    await uni.showToast({
      title: "签到成功",
      icon: "success",
    });

    params.value.page = 1;
    getMySignUpActivityListData();
  } else {
    await uni.showToast({
      title: msg,
      icon: "error",
    });
  }
};
const handleActivityItemClick = (activity) => {
  const { id } = activity;
  customNav("sign-up-detail?activityId=" + id);
};

onShow(() => {
  getMySignUpActivityListData();
});
onReachBottom(() => {
  scrollToLower();
});
</script>

<style lang="less" scoped>
.my-sign-up {
  background-color: #fff;
  padding: 35rpx;
  height: auto;
  :deep(.u-list) {
    height: auto !important;
  }
  .btn-group {
    margin-top: 20rpx;

    .btn {
      width: 155rpx;
      height: 51rpx;
      line-height: 51rpx;
      border-radius: 7rpx;
      font-family: "ali-p";
      text-align: center;
      font-size: 23rpx;
      color: @color-origin-white;
    }

    .scan {
      background-color: @color-green;
    }

    .ending,
    .not-start {
      background-color: @color-light-grey;
    }
  }
}
</style>
